<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Document</title>
</head>

<body>
    <div class="fitness-sportstwo">
        <!-- 倒计时蒙层 -->
        <div class="countdown">
            <span id="countzero">3</span>
        </div>


        <!-- 运动蒙层 -->
        <div class="movement">
            <h1 id="h1" class="f20 ">运动中</h1>
            <p class="kilometre f20"><span class="kilometer">0</span>公里</p>
            <p class="tcenter difl juspa">
                <span class="f14">GPS信号度低, 数据精准度低</span>
                <i class="iconfont icon-dingwei f40" id="icondingwei"></i>
            </p>

            <div class="database difl">
                <div class="flg1 database1 difl flco jcse">
                    <i class="iconfont icon-peisu f43 "></i>
                    <p>配速</p>
                    <p class="peisu">--</p>
                </div>
                <div class="flg1 database1 difl flco jcse">
                    <i class="iconfont icon-shijiyongshi f43"></i>
                    <p class="">用时</p>
                    <p id="when">00:00:00</p>
                </div>
                <div class="flg1 database1 difl flco jcse">
                    <i class="iconfont icon-qialuli f43"></i>
                    <p class="">千卡</p>
                    <p class="kaluli">3000</p>
                </div>
            </div>

            <div class="function  difl jucen">
                <!-- 暂停 -->
                <div class="zanting coblue difl flco ">
                    <i class="iconfont icon-timeout f36"></i>
                    <span>暂停</span>
                </div>

                <!-- 继续 -->
                <div class=" jixu difl jucen flco">
                    <i class="iconfont icon-weimingmingwenjianjia_jiantou
                    f36"></i>
                    <span>继续</span>
                </div>

                <!--  结束 -->
                <div class=" jieshu difl jucen flco">
                    <i class="iconfont icon-jieshu f36"></i>
                    <span>结束</span>
                </div>
            </div>

        </div>

        <!-- 地图 - 蒙层 -->
        <div id="mapModal" class="map">
            <div id="amap" style="width:100%;height: 667px;"></div>

            <div class="outrun">
                <h2 class="f20 bold maprun coblue ">户外跑 <br><span class="colorhei f40">99.99</span>
                    <span class="colorhei gongli">公里</span> <span class="cogray">2020/11/10</span>
                </h2>
                <div class="dpflex">
                    <div class="flg1 tcenter ptb30">
                        <span>平均配速</span>
                        <p class="mt8 pingjunpeisu">--</p>
                    </div>
                    <div class="flg1 tcenter ptb30">
                        <span>用时</span>
                        <p class="mt8" id="useTime">www</p>
                    </div>
                    <div class="flg1 tcenter ptb30">
                        <span>距离</span>
                        <p class="mt8 juli">--</p>
                    </div>
                </div>
            </div>

        </div>

        <!-- 完成 -->
        <div id="sucess" class="sucess jccenter" style="width: 80px; height: 40px;border: 1px solid gray;">完成</div>
        <!-- 返回 -->
        <div id="back" class="back" style="width: 80px; height: 40px;border: 1px solid gray;">返回</div>

        <!-- 引用百度地图 -->
        <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=nf37rxfHx3zdaK3xtRBLyfQwBv95o4vU"></script>
</body>

</html>